<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>国信安-教务系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<style>
			/* 移动端 */
			
			@media screen and (max-width: 768px) {
				.layui-layout-admin .layui-layout-left,
				.layui-layout-admin .layui-body,
				.layui-layout-admin .layui-footer {
					left: 0;
				}
				.layui-layout-admin .layui-side {
					left: -300px;
				}
			}
			/*.layui-table td{
   	 height: 100px;
    }*/
			
			.layui-table td img {
				width: 100%;
				height: 100%;
			}
			
			.layui-input {
				width: 175px;
			}
			
			.layui-unselect {
				width: 200px;
			}
		</style>

	</head>
	<body>
		<!--名字  类型  学分区间 多条件查询-->
		<div class="layui-form" id="search-aclassForm" lay-filter="search-aclassForm">
			<!--或者<form class="layui-form" action=""></form> -->
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">班级名称:</label>
					<div class="layui-input-inline" >
						<!--option  查询出来的-->
						<select name="name" class="getAclass">
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>
			
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<!--option  查询出来的-->
						<select name="state">
							<option value="">--请选择--</option>
							<option>0</option>
							<option>1</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn" lay-submit="search-submit" lay-filter="search-filter">
					      	<i class="layui-icon layui-icon-search"></i>查询</button>
					</div>
				</div>
			</div>
		</div>

	<!--批量删除 添加按钮-->
		<div class="aclass-btns">
				<div class="layui-btn-container">
					<div class="layui-btn-group">
			<button type="button" class="layui-btn layui-btn-aclass" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i>删除</button>
			<button type="button" class="layui-btn layui-btn-aclass" data-type="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
			<!--<button type="button" class="layui-btn layui-btn-aclass" data-type="upload"><i class="layui-icon layui-icon-upload-circle"></i>批量上传</button>
			-->
			</div>
		</div>
	  </div>

		<!--表格数据-->
		<table id="test-aclass" lay-filter="filter-aclass"></table>
		<!--表格内置工具栏-->
		<script type="text/html" id="table-rows-aclass">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
		
		
		<!--添加数据的表单-->
		<div class="layui-form" id="aclassForm" lay-filter="edit-aclassForm" style="display: none;" >
			<!--或者<form class="layui-form" action=""></form> -->
			<!--在添加的时候 这板块不存在  修改 id板块就存在-->
			<div class="layui-form-item" id="display_id">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">课程id:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<!--内层-->
						<input type="text" class="layui-input" name="id" readonly="">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">班级名称:</label>
					<div class="layui-input-block">
						<!--option  查询出来的-->
						<input type="text" class="layui-input" name="name">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">状态:</label>
					<div class="layui-input-block">
						<!--option  查询出来的-->
						<select name="state" id="state">
							<option value="">--请选择--</option>
							<option value="0">0</option>
							<option value="1">1</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="studentForm-submit" lay-filter="studentForm-filter">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			
		</div>
		
	</body>
	
	
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script>
		layui.use(['element', 'table', 'layer', 'form'], function() {
			//加载元素  element所以的元素
			//  form 表单元素
			// layer 窗口
			// table 表格
			var element = layui.element,
				form = layui.form,
				layer = layui.layer,
				table = layui.table;
				
				//select  getAclass 加载事件
				//ajax 请java后端   
				$.getJSON("json/aclass.json", function(result){
					//获取时候是个data数据类型  所以我们需要遍历一下  然后  进行   数据赋值
					var arry = result.data;
					for (var i = 0; i < arry.length; i++) {
						$(".getAclass").append("<option value='"+arry[i].id+"'>"+arry[i].name+"</option>" )
					}
				   //刷新表单
				   form.render('select');
				});
				
		//表格加载数据:  JSON
			//表格的加载  ：ajax请求，然后渲染表格
			table.render({
				elem: '#test-aclass' //那个table  id的值
					,
				url: 'json/aclass.json' //  url后面 servlet | json
					,
				cols: [
					[ //解析json数据 表头
						{
							type: 'checkbox',
							fixed: 'left',
						}, {
							field: 'id',
							width: 150,
							title: '课程编号',
							sort: true
						}, {
							field: 'name',
							title: '课程名称',
							minWidth: 150
						}, {
							field: 'state',
							title: '状态',
							width: 150
						}, {
							title: '操作',
							width: 150,
							align: 'center',
							fixed: 'right',
							toolbar: '#table-rows-aclass'
						}
					]
				],
				page: true //是否开启分页
					,
				limit: 10 //每页显示的条数
					,
				limits: [5, 10, 20, 50, 100] // 选择分页的显示条数
					,
				height: 500,
				text: '对不起，加载出现异常,请刷新试试。'
			});
			/*表格工具的事件*/
			table.on('tool(filter-aclass)', function(obj) {
				console.log(obj); //当前对象
				
				//获取当前行的数据   rows数据
				var data = obj.data;
				console.log(obj.event); //当前点击事件的名称
				if(obj.event == "del") {//删除
				  console.log("正在删除")
				 console.log(obj.data); //当前行的数据
				} else {
				   console.log("查看数据详情");
				   console.log(obj.data); //当前行的数据
				   //把数据放入表单中
				    console.log(obj.data.type);//name
				    //option  id
				    
//					form.val("edit-aclassForm", obj.data);
//					  给表单赋值
					form.val("edit-aclassForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						  "id": data.id,
						  "name":  data.name
						  ,"state": data.state
					});
					form.render('select');	
					
					
					$("#display_id").css("display","block");
				   //把数据放入 from中进行展示
				   	layer.open({
						type: 1,
						title: '修改学生信息',
						content: $('#aclassForm'),
						maxmin: true,
						area: ['600px', '400px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#aclassForm').css("display", "none");
							return true;
						}
					});
				   
				}
			});
			//多条件查询 form 表单的submit 绑定提交事件
			form.on('submit(search-filter)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var field = data.field;
				//给表单然后进行 table 筛选
				table.reload('test-aclass', {//page  当前页面  limit 每页显示的条数
					//http://127.0.0.1:8020/day12_web/jw/json/aclass.json?page=1&limit=10&name=English&type=1&startSocre=1&endSocre=10
					url: 'json/aclass.json' //异步数据接口
						,
					where: data.field //设定异步数据接口的额外参数
					//,height: 300
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

			/**
			 * 添加和批量删除的方法
			 */
			var 	active={
				add:function(){
					//打开新得窗口  窗口展示一个表单  让用户填入新的数据
					//里面数据清空
					form.val("edit-aclassForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						  "id": ""
						  ,"name": ""
						  ,"state": ""
						});
						$("#display_id").css("display","none");
					//把隐藏的表单显示新窗口中
						layer.open({
						type: 1,
						title: '添加班级信息',
						content: $('#aclassForm'),
						maxmin: true,
						area: ['600px', '400px'],
						resize: false,
						yes: function(index, layero) {
							$("#studentForm-submit").trigger('click'); //提交绑定点击事件
						},
						cancel: function(index, layero) {
							//把表单的display  设置成none
							$('#aclassForm').css("display", "none");
							return true;
						}
					});
					
				},
				batchdel:function(){
					//查询看勾选的数据
					var checkData = table.checkStatus('test-aclass').data; //idTest 即为基础参数 id 对应的值
					if(checkData.length>0){
						console.log(checkData);
					}else{
						layer.alert('请选择数据', {icon: 2});//1.√  2.错误 3:? 4锁 5"不开心" 6.开心
					}
					
				}
				
			}
			
			
			//批量删除 添加按钮 解析data-type的值,绑定对应的事件
			$('.layui-btn-aclass').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

				
		});
	</script>
</html>
